<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="csrf-token" content="{{ csrf_token() }}"/>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport"/>
    {{--<link rel="stylesheet" href="https://heerey525.github.io/layui-v2.4.3/layui-v2.4.5/css/layui.css">--}}
    <script src="{{ URL::asset('js/admin/jquery.js') }}"></script>
    <script src="{{ URL::asset('js/admin/pintuer.js') }}"></script>
    <script src="{{ URL::asset('js/admin/layer/layer.js') }}"></script>
    <script src="{{ URL::asset('js/admin/jquery.cookie.js') }}"></script>
    {{--<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>--}}
    <script src="{{ URL::asset('js/jquery/jquery-3.4.1.js') }}"></script>
    <title>睡眠新世界</title>
    <link rel="icon" href="/img/favicon.ico" type="image/x-icon">
</head>
<style>

    /* 大屏 */
    @media only screen and (min-width: 768px) {
        html {
            height: 100%;

        }

        body {
            text-align: center;
            line-height: 4;
            margin: auto;
            width: 350px;
            top: 15%;
            position: relative;
        }

        .clearfix > input {
            padding: 5px;
            border: 0
        }

        .out_icon {
            float: right;
        }

        .acc_apply {
            padding: 15px 0px 0 0px;
            position: relative;
            width: 350px
        }

        .acc_head {
            line-height: 3;
        }

        header {
            position: fixed;
            width: 350px;
            font-weight: bold;
        }

        label {
            width: 60px;
            display: inline-block;
        }

        #tj {
            width: 80%;
            border-radius: 44px;
        }

        #fh {
            width: 80%;
            border-radius: 44px;
        }

        #sss {
            height: 200px;
            border: 1px dashed;
            padding-top: 10px;
            margin: 5px 0 10px;
            overflow: hidden;
        }

        #img0 {
            width: 80%;
            display: none;
        }

        #file0 {
            width: 75px;
            position: absolute;
            top: 70%;
            left: 40%;
            opacity: 0.5
        }
    }

    /* 手机 */
    @media only screen and (min-width: 320px) and (max-width: 767px) {

        html {
            height: 100%;
        }

        body {
            text-align: center;
            line-height: 4;
            margin: 0;
            background: white;
            padding: 0;
        }

        .clearfix > input {
            padding: 5px;
            border: 0
        }

        .out_icon {
            float: right;
        }

        .acc_apply {
            padding: 15px 15px 0 15px;
            position: relative;
        }

        .acc_head {
            line-height: 3;
            border-bottom: 2px solid #a0999942;
        }

        header {
            /*position: fixed;*/
            width: 100%;
            background: #EDEDED;
            font-weight: bold;
        }

        label {
            width: 65px;
            display: inline-block;
        }

        .acc_apply > ul > .clearfix {
            text-align: left;
        }

        #tj {
            width: 80%;
            border-radius: 44px;
        }

        #fh {
            width: 80%;
            border-radius: 44px;
        }

        #sss {
            height: 200px;
            border: 1px dashed;
            padding-top: 10px;
            margin: 5px 0 10px;
            overflow: hidden;
        }

        #img0 {
            width: 80%;
            display: none;
        }

        #file0 {
            width: 75px;
            position: absolute;
            top: 70%;
            left: 40%;
            opacity: 0.5
        }

        ul {
            list-style: none;
            /*padding-inline-start: 0;*/
            padding: 0;
        }

        footer {
            background: #34aeea;
            border-radius: 50px;
            line-height: 3;
            margin: 15px;
        }
    }
</style>
<body>
<header class="acc_head">
    <div class="clearfix">
        <span class="tc">实名认证</span>
    </div>
</header>
<section class="acc_apply">
    <ul>
        <li class="clearfix" style="margin-top:45px">
            <label class="tl">账号：</label>
            <input autocomplete="off" placeholder="请输入账号" class="uname" type="text"/>
        </li>
        <li class="clearfix">
            <label class="tl acc_five">手机号：</label>
            <input autocomplete="off" placeholder="请输入手机号" class="phone" type="text"/>
        </li>

        <li class="clearfix" style="text-align: center;">
            <p class="tl acc_four fl">请上传身份证件正面照片：</p>
        </li>
        <li style="border-top: 0; margin-bottom: 60px;">
            <div class="acc_img">

                <div id="sss">
                    <img type="file" class="acc_imgin" src="" id="img0" alt="未上传身份证">
                </div>
                <div class="acc_sc">
                    <input type="file" name="file0" id="file0" multiple class="ph08"/>
                </div>
                <p class="ph09" style="font-size: 5px;line-height: 1;">注：身份证所有信息清晰可见，用于用户实名认证 防止他人恶意登录！</p>
            </div>
        </li>
    </ul>
</section>
<footer class="acc_foot clearfix">
    <a id="tj" class="layui-btn layui-btn-normal">提交</a>
    <a href="/home/login/login" id="fh" class="layui-btn layui-btn-normal">返回登录</a>
</footer>

<!-- 网站要用到的一些类库 -->
<script type="text/javascript">

    $(function () {
        var uname = $('.uname')
        var phone = $('.phone')
        var img_url = $("#img0")
        var img0 = $(":file")
        $("#fh").hide()
        // 提交
        $('#tj').click(function () {
            if (uname[0].value == '') {
                layer.msg("请填写正确用户名")
                return false
            } else if (!(/^1[3|5|6|7|8|9][0-9]\d{4,8}$/.test(phone[0].value))) {
                layer.msg("请填写正确手机号")
                return false
            } else {
                $('#tj').hide()
                $("#fh").show()
                var url = "{{url('home/login/realName')}}";
                var file = $('#file0').get(0).files[0];
                var formData = new FormData();
                formData.append('name', uname.val())
                formData.append('phone', phone.val())
                formData.append('file', file)
                $.ajax({
                    type: "POST",

                    headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                    url: url,
                    data: formData,
                    dataType: 'json',
                    processData: false,
                    contentType: false,
                    success: function (result) {
                        if (result.code == 1) {
                            $('#tj').hide()
                            $("#fh").show()
                            layer.msg(result.data)
                            return false
                        } else {
                            layer.msg(result.data)
                        }
                    },

                });
            }
        })

        $("#file0").change(function () {
            if (this.files && this.files[0]) {
                var objUrl = getObjectURL(this.files[0]);
                $("#img0").show()
                console.log("objUrl = " + objUrl);
                if (objUrl) {
                    $("#img0").attr("src", objUrl);
                    $("#file0").click(function (e) {
                        $("#img0").attr("src", objUrl);
                        $("#img0").show()
                    });
                } else {
                    //IE下，使用滤镜
                    this.select();
                    var imgSrc = document.selection.createRange().text;
                    var localImagId = document.getElementById("sss");
                    //图片异常的捕捉，防止用户修改后缀来伪造图片
                    try {
                        preload.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = data;
                    } catch (e) {
                        this._error("filter error");
                        return;
                    }
                    this.img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src=\"" + data + "\")";
                    console.log(this.img.style.filter)
                }
            }
        });

        //建立一個可存取到該file的url
        function getObjectURL(file) {
            var url = null;
            if (window.createObjectURL != undefined) { // basic
                url = window.createObjectURL(file);
            } else if (window.URL != undefined) { // mozilla(firefox)
                url = window.URL.createObjectURL(file);
            } else if (window.webkitURL != undefined) { // webkit or chrome
                url = window.webkitURL.createObjectURL(file);
            }
            return url;
        }
    })
</script>
</body>
</html>